<template>
  <div class="app">
    <h1>我是App组件(祖)</h1>
    <Child/>
  </div>
</template>

<script>
import { toRefs,provide, reactive, ref, readonly, isRef, isReactive, isReadonly, isProxy } from 'vue';
export default {
  name: "App",
 
  setup(){
    let car =reactive({
      name:"宝马",
      price:40
    })
    let sum = ref(0);

    let car2 = readonly(car)

    console.log(isRef(sum))
    console.log(isReactive(car))
    console.log(isReadonly(car2))
    console.log(isProxy(car))
    console.log(isProxy(sum))

    return { ...toRefs(car)}
  }
};
</script>

<style>
.app{
  background-color: gray;
  padding: 10px;
}
</style>